<template>
  <div :class="partFour" id="part-four"></div>
</template>

<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");

export default {
  name: "partFour",
  data() {
    return {
      partFour: "part-four",
      curWidth: 0
    };
  },
  beforeMount() {
    this.curWidth =
      document.documentElement.clientWidth || document.body.clientWidth;
    if (this.curWidth < 1600) {
      this.partFour = "part-four-responsive";
    }
  },
  mounted() {
    this.drawECharts();
  },
  methods: {
    drawECharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("part-four"));
      let postData = [2841, 3269, 5508, 2434, 1021] //后端传的值
      let obj = {
        color: ["#3398DB"],
        // 标题
        title: {
          // 标题文本
          text: "数据统计",
          // 标题文本样式
          textStyle: {
            color: "#fff"
          },
          // 标题位置
          x: "center"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        // 图形布局
        grid: {
          // 距离底部高度
          bottom: "40"
        },
        // 横轴
        xAxis: {
          type: "category",
          data: [
            "github阅读量",
            "掘金点击量",
            "博客流量",
            "项目参与数",
            "码云Fork数"
          ],

          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          },
          axisLabel: {
            // 横轴信息全部显示
            interval: 0
          }
        },
        // 纵轴
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          },
          axisLabel: {
            // 横轴信息全部显示
            interval: 0
          }
        },
        // 图形系列
        series: [
          {
            // 图类型
            type: "bar",
            name: "直接访问",
            barWidth: "60%",
            // 数据
            data: postData,
            // // 文本
            // label: {
            //   show: true,
            //   position: "top",
            //   color: "#fff",
            //   formatter: "{b}"
            // },
            // 柱条样式
            itemStyle: {
              color: "deepskyblue"
            },
            zlevel: 1
          }
        ]
      }
      myChart.setOption(obj);
      setInterval(function (){
        let temp =  obj.series[0]
          temp.data[0] = (Math.random()*5000).toFixed(2) - 0;
          temp.data[1]= (Math.random()*5000).toFixed(2) - 0;
          temp.data[2] = (Math.random()*5000).toFixed(2) - 0;
          temp.data[3] = (Math.random()*5000).toFixed(2) - 0;
          temp.data[4] = (Math.random()*5000).toFixed(2) - 0;
          myChart.setOption(obj);
      },10*1000);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  }
};
</script>

<style scoped>
.part-four {
  width: 100%;
  height: 280px;
  border: 40px solid transparent;
  border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
  background: #18202d;
}
.part-four-responsive {
  width: 100%;
  height: 280px;
  border: 5px solid transparent;
  border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
  background: #18202d;
}
</style>